<template>
	<view>
		<!-- 头部 -->
		<view class="bg-white cash_header">
			<u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
						 swiperWidth="750"></u-tabs-swiper>
		</view>	
		<swiper :style="{'height':scrollHeight}"  :current="swiperCurrent" duration="600"  @transition="transition" @animationfinish="animationfinish">
			<!-- 进行中 -->
		    <swiper-item>
				<scroll-view scroll-y="true"  :style="{height: scrollHeight}">
					<view class="d-flex flex-column j-center a-center h_100" v-if="!going_list.length">
						<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
						<view class="">暂无活动</view>
					</view>	
					<view v-else class="" v-for="(item,index) in going_list" :key="index" @click="cash_detail(item)">
						<view class="mx-2 mt-2 px-3 py-2 rounded-top bg-white position-relative">
							<view class="yuan1"></view>
							<view class="p-1 text-000">{{item.act_name}}</view>
							<view class="xian mt-2"></view>
							<view class="yuan2"></view>
							<view class="p-1 mt-2">
								<view class="font-35 impletion_price">{{item.label_act_type}}</view>
								<view class="mt-1"><text class="text-666">活动时间:</text><text class="ml-1 text-000">{{item.formatted_start_time.substr(0,10)}}-{{item.formatted_end_time.substr(0,10)}}</text></view>
							</view>
						</view>
						<view class="reduced rounded-bottom mx-2 px-3 py-2 mb-2">
							<view class="font-27 text-999 pl-1">优惠范围: {{item.label_act_range}}</view>
							<view class="font-27 text-999 pl-1 mt-1 d-flex" >享受优惠的会员等级：
								<view class="font-27 text-999 mr" v-for="(rank_item,rank_index) in item.rank_name" :key="rank_index">
									{{rank_item}}
								</view>
							</view>
						</view>
					</view>	
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true"  :style="{height: scrollHeight}">
					<view class="d-flex flex-column j-center a-center h_100" v-if="!coming_list.length">
						<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
						<view class="">暂无活动</view>
					</view>	
					<view v-else class="" v-for="(item,index) in coming_list" :key="index" @click="cash_detail(item)">
						<view class="mx-2 mt-2 px-3 py-2 rounded-top bg-white position-relative">
							<view class="yuan1"></view>
							<view class="p-1 text-000">{{item.act_name}}</view>
							<view class="xian mt-2"></view>
							<view class="yuan2"></view>
							<view class="p-1 mt-2">
								<view class="font-35 impletion_price">{{item.label_act_type}}</view>
								<view class="mt-1"><text class="text-666">活动时间:</text><text class="ml-1 text-000">{{item.formatted_start_time.substr(0,10)}}-{{item.formatted_end_time.substr(0,10)}}</text></view>
							</view>
						</view>
						<view class="reduced rounded-bottom mx-2 px-3 py-2 mb-2">
							<view class="font-27 text-999 pl-1">优惠范围: {{item.label_act_range}}</view>
							<view class="font-27 text-999 pl-1 mt-1 d-flex" >享受优惠的会员等级：
								<view class="font-27 text-999 mr" v-for="(rank_item,rank_index) in item.rank_name" :key="rank_index">
									{{rank_item}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true"  :style="{height: scrollHeight}">
					<view class="obscuration">
						<view class="h_100" v-if="!finished_list.length">
							<view class="d-flex flex-column j-center a-center h_100">
								<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
								<view class="">暂无活动</view>
							</view>
						</view>
						<view v-else class="" v-for="(item,index) in finished_list" :key="index" @click="cash_detail(item)">
							<view class="mx-2 mt-2 px-3 py-2 rounded-top bg-white position-relative">
								<view class="yuan1"></view>
								<view class="p-1 text-000">{{item.act_name}}</view>
								<view class="xian mt-2"></view>
								<view class="yuan2"></view>
								<view class="p-1 mt-2">
									<view class="font-35 impletion_price">{{item.label_act_type}}</view>
									<view class="mt-1"><text class="text-666">活动时间:</text><text class="ml-1 text-000">{{item.formatted_start_time.substr(0,10)}}-{{item.formatted_end_time.substr(0,10)}}</text></view>
								</view>
							</view>
							<view class="reduced rounded-bottom mx-2 px-3 py-2 mb-2">
								<view class="font-27 text-999 pl-1">优惠范围: {{item.label_act_range}}</view>
								<view class="font-27 text-999 pl-1 mt-1 d-flex" >享受优惠的会员等级：
									<view class="font-27 text-999 mr" v-for="(rank_item,rank_index) in item.rank_name" :key="rank_index">
										{{rank_item}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="footer"></view>
		<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
			<button type="warn" @click="add_cash">添加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight:0, // 屏幕高度
				list:[{id:1,name:"进行中"},{id:2,name:"未开始"},{id:3,name:"已结束"}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				
				going_list:"", // 进行中
				coming_list:"", // 未开始
				finished_list:"", // 已结束
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 编辑现金减免
			cash_detail(item){
				uni.navigateTo({
					url:"/pagesA/cash/cash-edit?act_id="+item.act_id
				})
			},
			add_cash(){
				uni.navigateTo({
					url:"/pagesA/cash/cash-add"
				})
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.cash_header').boundingClientRect()
					query.select('.footer').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].top - res[1].bottom+ 'px';
					})
				}
			})
		},
		onLoad() {
			uni.showLoading({
				title:"加载中",
				success: () => {
					this.$H.post("admin/favourable/list",{
						activity_type:"reduce",
						status:"going"
					}).then(res=>{
						this.going_list=res.data
						this.u_loadmore=false 
						uni.hideLoading()
					})
				}
			})
		},
		onShow() {
			this.$H.post("admin/favourable/list",{
				activity_type:"reduce",
				status:"going"
			}).then(res=>{
				this.going_list=res.data
			})
			
			this.$H.post("admin/favourable/list",{
				activity_type:"reduce",
				status:"coming"
			}).then(res=>{
				this.coming_list=res.data
			})
			this.$H.post("admin/favourable/list",{
				activity_type:"reduce",
				status:"finished"
			}).then(res=>{
				this.finished_list=res.data
			})
		}
	}
</script>

<style>
	page{
		background-color: #EAEAEA;
	}
	.yuan1 {
        position: absolute;
        width: 40upx;
        height: 40upx;
        border-radius: 40upx;
        background-color: #EAEAEA;
        left: -20upx;
        top: 80upx;   
    }
	
    .yuan2 {
        position: absolute;
        width: 40upx;
        height: 40upx;
        border-radius: 20upx;
        background-color: #EAEAEA;
        right: -20upx;
        top: 80upx;
    }
    
    .xian {
        width: 100%;
        border: 1px dashed #EAEAEA;
    }    
    
	.reduced{
		background-color: #f7f7f7;
		box-shadow: inset 0upx 0upx 20upx #ececec;
	}
	.impletion_price{
		color: #ff2727;
	}
</style>
